<template>
	<view class="course-box">
		<view class="course-box-top">
			<img style='width: 100%;height: 400upx;' src='http://127.0.0.1:7001/public/WHJ/banner.png' />
			<view class="course-tab" >
				<view style="width: 96%;height: 80upx;margin: 0 auto;">
					<u-tabs  @click="click"   :list="list4" lineWidth="75"  lineColor="#8fc31f"  :activeStyle="{  color: '#8fc31f', fontSize: '18px',  transform: 'scale(1.05)' }"
					       :inactiveStyle="{
					           color: '#606266',
					           transform: 'scale(1)',	
								   fontSize: '18px',
					       }"
					       itemStyle="padding-left: 30px; padding-right: 30px; height: 45px;">
					   </u-tabs>
				</view>
                    <view v-if="tabs==0" class="course-box-content">
						<view style="width: 100%;height: 330upx;background: #fafafa;" >
							<view style="width: 100%;height:330upx;margin-top: 25upx;">
							<view v-for="item in choice" :key="item.id" style="width: 200upx;height: 166upx;float: left;margin-right: 40upx;">
								<img style='width: 100upx;height: 100upx;margin-left: 88upx;' :src='item.url' />
								<span style='display: block;font-size:17px;color: #8fc31f;margin-left:106upx;line-height: 50upx;'>{{item.name}}</span>
							</view>
							</view>
							<view style="width: 100%;height: 25upx;background: #f0f0f0;"></view>
							<!-- 孕期培训 -->
							<view class="yunqi">
								<view class="yunqi-top">
									<view style="width: 100%;height: 60upx;">
										<view style='width: 28%;height: 45%;margin: 0 auto;'>
											<img  style='width: 100%;height: 100%;margin-top: 10px;' src='http://127.0.0.1:7001/public/WHJ/producttitle1.png' />
										</view>
									</view>
									<!-- 内容 -->
								
								<view v-if="isload" style="width: 90%;margin:0 auto;border-top:1px solid #cbcbcb;margin-top: 10upx;">
									<view style="width: 100%;">
									<view v-for="item in Train2" :key="item.id"   style="width: 100%;height: 200upx;border-bottom:1px solid #cbcbcb;display: flex;">
										<view style="width: 30%;height: 200upx;">
											<img style='width: 100%;height: 160upx;margin-top: 20upx;' :src='item.url' />
										</view>
										<view style="width: 70%;height: 200upx;">
											<span style='font-size: 18px;margin-top: 14upx;margin-left: 20upx;display: block;'>{{item.name}}</span>
											<view style="width: 91%;height: 60upx;margin: 0 auto;">
												<span style='font-size: 12px;display: block;color: #9e9e9e'>{{item.introduce}}</span>
											</view>
											<view style="width: 91%;height: 40upx;margin: 30upx auto;display: flex;justify-content: space-between">
												<span style='font-size: 12px;color: #9e9e9e;line-height: 56upx;display: block;'>参与人数:{{item.num}}</span>
												<span style='font-size: 17px;color: #8fc31f;'>￥{{item.price}}</span>
											</view>
										</view>
									</view>
									<view @click="load()" style="width: 100%;height: 60upx;">
										<u-loadmore  :nomore-text="nomoreText"  :status="status" />
									</view>
									<view style="width: 100%;height: 25upx;background: #f0f0f0;"></view>
									</view>
										</view>					
											</view>
											<view class="yunqi">
												<view class="yunqi-top">
													<view style="width: 100%;height: 60upx;">
														<view style='width: 28%;height: 45%;margin: 0 auto;'>
															<img  style='width: 100%;height: 100%;margin-top: 10px;' src='http://127.0.0.1:7001/public/WHJ/producttitle2.png' />
														</view>
													</view>
													<!-- 内容 -->
												
												<view v-if="isload" style="width: 90%;margin:0 auto;border-top:1px solid #cbcbcb;margin-top: 10upx;">
													<view style="width: 100%;">
													<view v-for="item in Train4" :key="item.id"   style="width: 100%;height: 200upx;border-bottom:1px solid #cbcbcb;display: flex;">
														<view style="width: 30%;height: 200upx;">
															<img style='width: 100%;height: 160upx;margin-top: 20upx;' :src='item.url' />
														</view>
														<view style="width: 70%;height: 200upx;">
															<span style='font-size: 18px;margin-top: 14upx;margin-left: 20upx;display: block;'>{{item.name}}</span>
															<view style="width: 91%;height: 60upx;margin: 0 auto;">
																<span style='font-size: 12px;display: block;color: #9e9e9e'>{{item.introduce}}</span>
															</view>
															<view style="width: 91%;height: 40upx;margin: 30upx auto;display: flex;justify-content: space-between">
																<span style='font-size: 12px;color: #9e9e9e;line-height: 56upx;display: block;'>参与人数:{{item.num}}</span>
																<span style='font-size: 17px;color: #8fc31f;'>￥{{item.price}}</span>
															</view>
														</view>
													</view>
													<view @click="load1()" style="width: 100%;height: 60upx;">
														<u-loadmore :status="status1" />
													</view>
													<view style="width: 100%;height: 25upx;background: #f0f0f0;"></view>
													</view>
														</view>					
															</view>
															<view class="yunqi">
																<view class="yunqi-top">
																	<view style="width: 100%;height: 60upx;">
																		<view style='width: 28%;height: 45%;margin: 0 auto;'>
																			<img  style='width: 100%;height: 100%;margin-top: 10px;' src='http://127.0.0.1:7001/public/WHJ/producttitle3.png' />
																		</view>
																	</view>
																	<!-- 内容 -->
																
																<view v-if="isload" style="width: 90%;margin:0 auto;border-top:1px solid #cbcbcb;margin-top: 10upx;">
																	<view style="width: 100%;">
																	<view v-for="item in Train5" :key="item.id"   style="width: 100%;height: 200upx;border-bottom:1px solid #cbcbcb;display: flex;">
																		<view style="width: 30%;height: 200upx;">
																			<img style='width: 100%;height: 160upx;margin-top: 20upx;' :src='item.url' />
																		</view>
																		<view style="width: 70%;height: 200upx;">
																			<span style='font-size: 18px;margin-top: 14upx;margin-left: 20upx;display: block;'>{{item.name}}</span>
																			<view style="width: 91%;height: 60upx;margin: 0 auto;">
																				<span style='font-size: 12px;display: block;color: #9e9e9e'>{{item.introduce}}</span>
																			</view>
																			<view style="width: 91%;height: 40upx;margin: 30upx auto;display: flex;justify-content: space-between">
																				<span style='font-size: 12px;color: #9e9e9e;line-height: 56upx;display: block;'>参与人数:{{item.num}}</span>
																				<span style='font-size: 17px;color: #8fc31f;'>￥{{item.price}}</span>
																			</view>
																		</view>
																	</view>
																	<view @click="load2()" style="width: 100%;height: 60upx;">
																		<u-loadmore :status="status2" />
																	</view>
																	<view style="width: 100%;height: 25upx;background: #f0f0f0;"></view>
																	</view>
																		</view>					
																			</view><!--  -->
																			
																			
																			<view class="yunqi-top">
																				<view style="width: 100%;height: 60upx;">
																					<view style='width: 28%;height: 45%;margin: 0 auto;'>
																						<img  style='width: 100%;height: 100%;margin-top: 10px;' src='http://127.0.0.1:7001/public/WHJ/producttitle4.png' />
																					</view>
																				</view>
																				<!-- 内容 -->
																			<view v-if="isload" style="width: 90%;margin:0 auto;border-top:1px solid #cbcbcb;margin-top: 10upx;">
																				<view style="width: 100%;">
																				<view v-for="item in Train6" :key="item.id"   style="width: 100%;height: 200upx;border-bottom:1px solid #cbcbcb;display: flex;">
																					<view style="width: 30%;height: 200upx;">
																						<img style='width: 100%;height: 160upx;margin-top: 20upx;' :src='item.url' />
																					</view>
																					<view style="width: 70%;height: 200upx;">
																						<span style='font-size: 18px;margin-top: 14upx;margin-left: 20upx;display: block;'>{{item.name}}</span>
																						<view style="width: 91%;height: 60upx;margin: 0 auto;">
																							<span style='font-size: 12px;display: block;color: #9e9e9e'>{{item.introduce}}</span>
																						</view>
																						<view style="width: 91%;height: 40upx;margin: 30upx auto;display: flex;justify-content: space-between">
																							<span style='font-size: 12px;color: #9e9e9e;line-height: 56upx;display: block;'>参与人数:{{item.num}}</span>
																							<span style='font-size: 17px;color: #8fc31f;'>￥{{item.price}}</span>
																						</view>
																					</view>
																				</view>
																				<view @click="load3()" style="width: 100%;height: 60upx;">
																					<u-loadmore :status="status3" />
																				</view>
																				<view style="width: 100%;height: 25upx;background: #f0f0f0;"></view>
																				</view>
																					</view>					
																						</view>
															<view style="width: 100%;height: 100upx;"></view>
											</view>
							</view>	  
								</view>
								
								
							</view>
							
						</view>
					</view>
					<view v-if="tabs==1" class="course-box-content">
						<!-- 线下培训 -->
						<view class="Offline">
							<view style="width: 90%;margin: 0 auto;">
								<!-- 111 -->
							<view  class="yunqi-top">
								<view style="width: 100%;height: 80upx; border-bottom:1px solid #9e9e9e;margin: 0 auto;">
									<view style='width: 28%;height: 45%;margin: 0 auto;'>
										<img  style='width: 100%;height: 80%;margin-top: 15px;' src='http://127.0.0.1:7001/public/WHJ/producttitle5.png' />
									</view>
								</view>
						</view>
							</view>
							<view v-for="item in Offline1" :key="item.id" style="width: 90%;height:200upx;border-bottom: 1px solid #9e9e9e;margin: 0 auto;display: flex;">
								<view style="width:30%;height: 200upx;">
									<img style='width: 100%;height: 150upx;margin-top: 32upx;' :src='item.url' />
								</view>
								<view style="width:70%;height: 200upx;">
									<span style='display: block;font-size: 16px;margin-left: 20upx;margin-top: 20upx;'>{{item.name}}</span>
									<span style='display: block;font-size: 12px;margin-left: 18upx;margin-top: 25upx;color: #9e9e9e;'>{{item.region}}</span>
									<view style="display: flex;margin-top: 10upx;">
										<span style='display: block;font-size: 11px;margin-left: 20upx;margin-top: 25upx;color: #9e9e9e;-webkit-transform-origin-x: 0; -webkit-transform: scale(0.80);transform:scale(0.8);'>{{item.time}}</span>
										<button v-if="item.state=='0'" @click="signup(item)" style="width: 160upx;height:60upx;background:#8fc31f">
											<span style='font-size:14px;display: block;color: white;'>报名预约</span></button>
											<button  v-if="item.state=='1'" @click="signup(item)" style="width: 160upx;height:60upx;background:#999">
												<span style='font-size:14px;display: block;color: white;'>已经报名</span></button>
									</view>
									
								</view>
							</view>
						<view @click="load4()" style="width: 100%;height: 60upx;">
							<u-loadmore :status="status4" />
						</view>
						<view style="width: 100%;height: 25upx;background: #f0f0f0;"></view>
						
						<view class="Offline">
							<view style="width: 90%;margin: 0 auto;">
								<!-- 111 -->
							<view  class="yunqi-top">
								<view style="width: 100%;height: 80upx; border-bottom:1px solid #9e9e9e;margin: 0 auto;">
									<view style='width: 28%;height: 45%;margin: 0 auto;'>
										<img  style='width: 100%;height: 80%;margin-top: 15px;' src='http://127.0.0.1:7001/public/WHJ/producttitle5.png' />
									</view>
								</view>
						</view>
							</view>
							<view v-for="item in Offline2" :key="item.id" style="width: 90%;height:200upx;border-bottom: 1px solid #9e9e9e;margin: 0 auto;display: flex;">
								<view style="width:30%;height: 200upx;">
									<img style='width: 100%;height: 150upx;margin-top: 32upx;' :src='item.url' />
								</view>
								<view style="width:70%;height: 200upx;">
									<span style='display: block;font-size: 16px;margin-left: 20upx;margin-top: 20upx;'>{{item.name}}</span>
									<span style='display: block;font-size: 12px;margin-left: 18upx;margin-top: 25upx;color: #9e9e9e;'>{{item.region}}</span>
									<view style="display: flex;margin-top: 10upx;">
										<span style='display: block;font-size: 11px;margin-left: 20upx;margin-top: 25upx;color: #9e9e9e;-webkit-transform-origin-x: 0; -webkit-transform: scale(0.80);transform:scale(0.8);'>{{item.time}}</span>
										<button @click="del(item)" style="width: 160upx;height:60upx;background:#8fc31f">
											<span style='font-size:14px;display: block;color: white;'>查看详情</span></button>
									</view>
									
								</view>
							</view>
						<view @click="load5()" style="width: 100%;height: 60upx;">
							<u-loadmore :status="status5" />
						</view>
						<view style="width: 100%;height: 25upx;background: #f0f0f0;"></view>
						</view>
						<view style="width: 100%;height: 100upx;"></view>
					</view>
			</view>	
			<view v-if="tabs==2" class="course-box-content">
				<view style="width: 100%;height: 100vh;background: #f6f6f6;">
				<view style="width: 100%;height: 80upx;"></view>
				<view style="width: 80%;height: 400upx;margin: 0 auto;position: relative;">
					<span style='position: absolute;top: 9px;left: 30px;'>查询类别</span>
						<view>
							<u-picker @confirm="confirm" :show="show" :columns="columns"></u-picker>
						<input style=" width: 58%; height: 70upx; border: 1px solid #cbcbcb;margin: 0upx 210upx;border-radius: 5px;padding-left: 20upx;" v-model="value" type="text"  @click="show = true" />
						<input v-if="istab" v-model="value1" style=" width: 85%; height: 70upx; border: 1px solid #cbcbcb;margin: 40upx 30upx;border-radius: 5px;padding-left: 30upx;" type="text" placeholder="输入查询"  />
						<view v-if="istab1" style="width: 125%;height: 80upx;margin-left: -76upx;margin-top: 40upx;border-top: 1px solid #cbcbcb;border-bottom: 1px solid #cbcbcb;display: flex;">
			            <view style="width: 30%;height: 80upx;">
							<span style='display: block;font-size: 17px;margin-top: 20upx;margin-left: 20upx;'>所在地区</span>
						</view>
						<view @click="show1 = true" style="width: 70%;height: 80upx;display: flex;">
							<input v-model="value2" style="width: 100px;height: 45px;padding-left: 20px;"  type="text" />
							<input v-model="value3" style="width: 100px;height: 45px;"  type="text" />
							<input v-model="value4" style="width: 100px;height: 45px;"  type="text" />
			               <u-picker :show="show1" ref="uPicker" :columns="columns1" @confirm="confirm1" ></u-picker>
						</view>
						</view>
						<view style="width: 125%;height: 200px;margin-left: -76upx;" v-if="isregion">
							<view  v-for="item in region" :key="item.id" style="width: 100%;height: 170upx;border-bottom: 1px solid #cbcbcb;display: flex;">
								<view @click="xiangqing(item)" style="width: 24%;height: 170upx;">
								<img style='width: 110upx;height: 110upx;margin-top: 36upx;margin-left: 30upx;' src='http://127.0.0.1:7001/public/WHJ/avatar1.png' />
								</view>
								<view @click="xiangqing(item)" style="width: 76%;height: 170upx;">
								 <span style='font-size: 20px;display: flex;margin-top: 44upx;'>{{item.name}}</span>
								 <span style='font-size: 15px;display: flex;margin-top: 10upx;color: #cbcbcb;'>{{item.major}}</span>
								</view>
								
							</view>
					
							<view style="width: 100%;height: 100upx;">
								<span @click='all()' style='display: block;text-align: center;line-height: 100upx;color: #cbcbcb;'>查看全部地区导师</span>
							</view>
						</view>
						<view v-if="isregion1"  style="width: 100%;height: 100upx;">
							<span style='font-size: 18px;text-align: center;line-height: 200upx;display: block;color: #cbcbcb;' >该地区没有导师！</span>
						</view>
						<u-button @click='search()' style='width: 86%;margin-top: 80upx;' type="success" text="点击查询"></u-button>
						</view>
				</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
    export default {
        data() {
            return {
                list4: [{
                    name: '线上培训'
                }, {
                    name: '线下培训',
                }, {
                    name: '导师查询',
                }, ],
				tabs:'',
				isload:true,
				isload1:false,
				status: 'loadmore',
				status1: 'loadmore',
				status3: 'loadmore',
				status2: 'loadmore',
				status4: 'loadmore',
				status5: 'loadmore',
				 nomoreText: '没有更多了',
				choice:[],
				Train1:[],
				Train2:[],
				Train3:[],
				Train4:[],
				Train5:[],
				Train6:[],
				Offline:[],
				Offline1:[],
				Offline2:[],
					show: false,	
					show1: false,	
				    columns: [
				    ['导师姓名', '身份证号', '证件编号','地区查询']
				                ],
				    value:'导师姓名',
					value1:'',
					value2:'省',
					value3:'市',
					value4:'县/区',
					value5:'',
					tab:'0',
					istab:true,
					istab1:false,
					 columns1: [
					                    ['湖南省', '山东省','河北省','河北省','河北省','河北省','河北省','河北省','河北省','河北省','河北省','河北省','河北省','河北省','河北省','河北省'],
					                    ['长沙市', '济宁市', '石家庄市', '石家庄市','唐山市','唐山市','唐山市','保定市','保定市','保定市','张家口市','张家口市','张家口市','承德市','承德市','承德市'],
										['槟城县', '金乡县', '市辖区', '长安区','市辖区','路南区','路北区','市辖区','新市区','北市区','市辖区','桥东区','桥西区','市辖区','双桥区','双桥区']
									],
									region:[],
									isregion:false,
									isregion1:false,
									isup:true,
									isup1:false,
            }
        },
		onLoad(){
			this.$api.getChoice().then(res=>{
				this.choice=res.data
			})
			this.$api.getTrain().then(res=>{
				res.data.filter(item=>{
				if(item.state==1){
				return this.Train1.push(item)}else if(item.state==2){
					return this.Train3.push(item)
				}
				this.Train2=this.Train1.slice(0,2)
				this.Train5=this.Train1.slice(0,2)
				this.Train4=this.Train3.slice(0,2)
				this.Train6=this.Train3.slice(0,2)
				console.log(this.Train3)
				})
			})
			this.$api.getOffline().then(res=>{
				this.Offline=res.data
				this.Offline1=this.Offline.slice(0,4)
				this.Offline2=this.Offline.slice(0,4)
			})
		},
		
		methods: {
		            click(item) {
		                this.tabs=item.index
						console.log(this.tabs)
		            },
					load(){
						this.status = 'loading';
							setTimeout(() => {
										this.Train2=this.Train1
										this.status = 'nomore';
									}, 2000)
						},
						load1(){
							this.status1 = 'loading';
								setTimeout(() => {
											this.Train4=this.Train3
											this.status1 = 'nomore';
										}, 2000)
						},
						load2(){
							this.status2 = 'loading';
								setTimeout(() => {
											this.Train5=this.Train3
											this.status2 = 'nomore';
										}, 2000)
						},
						load3(){
							this.status3 = 'loading';
								setTimeout(() => {
											this.Train6=this.Train3
											this.status3 = 'nomore';
										}, 2000)
						},
						load4(){
							this.status4 = 'loading';
								setTimeout(() => {
											this.Offline1=this.Offline
											this.status4= 'nomore';
										}, 2000)
						},
						load5(){
							this.status5 = 'loading';
								setTimeout(() => {
											this.Offline2=this.Offline
											this.status5= 'nomore';
										}, 2000)
						},
							confirm(e) {
										this.value=e.value[0]
						                this.show = false
										this.tab=e.indexs[0]
										console.log(this.tab)
										if(this.tab==1||this.tab==2||this.tab==0){
											this.istab=true
											this.istab1=false
	                                       this.isregion=false
											this.value1=''
										}else if(this.tab==3){
											this.istab=false
											this.istab1=true
								
											
										}
									
									},
									confirm1(e) {
											console.log(e)
											this.show1 = false
											this.value2=e.value[0]
											this.value3=e.value[1]
											this.value4=e.value[2]
											this.value5=this.value2+this.value3+this.value4
											console.log(this.value5)
											},
									search(){
										if(this.tab==0){
											console.log(111)
											if(this.value1!=''){
												this.$api.searchTutor({name:this.value1}).then(res=>{
													console.log(res.data)
													let a=res.data
													a.forEach(item=>{
														if(item.name==this.value1){
															console.log(item.name)
															uni.navigateTo({
																url:`/pages/searchdel/searchdel?name=${item.name}`
															})
														}
													})
													
												})
											}
										}else if(this.tab==1){
											console.log(this.value1)
											if(this.value1!=''){
											this.$api.searchTutor1({teacherid:this.value1}).then(res=>{
												let b=res.data
												b.forEach(item=>{
													console.log(item)
													if(item.teacherid==this.value1){
														console.log(item.teacherid)
														uni.navigateTo({
															url:`/pages/searchdel/searchdel1?teacherid=${item.teacherid}`
														})
													}
												})
											})
											}
										}else if(this.tab==2){
											if(this.value1!=''){
												this.$api.searchTutor2({idnum:this.value1}).then(res=>{
													let c=res.data
													c.forEach(item=>{
														console.log(item)
														if(item.idnum==this.value1){
															console.log(item.idnum)
															uni.navigateTo({
																url:`/pages/searchdel/searchdel2?idnum=${item.idnum}`
															})
														}
													})
												})
											}
											
										}else if(this.tab==3){
											if(this.value5!==''){
												this.$api.searchTutor3({region:this.value5}).then(res=>{
													console.log(res)
													this.region=res.data
													if(this.region.length!==0){
														this.isregion=true
														this.isregion1=false
													}else if(this.region.length==0){
														this.isregion1=true
														this.isregion=false
													}
												})
											}
										}
									},
									all(){
										console.log(111)
										uni.navigateTo({
											url:'/pages/allregion/allregion'
										})
									},
									xiangqing(item){
										console.log(item.id)
										uni.navigateTo({
											url:`/pages/searchdel/searchdel3?id=${item.id}`
										})
									},
									signup(item){
								console.log(item.id)
								if(item.state=='0'){
									let a={
										id:item.id,
										state:'1'
									}
									this.$api.upOffline(a).then(res=>{
										this.$api.getOffline().then(res=>{
											this.Offline=res.data
											this.Offline1=this.Offline
											// this.Offline2=this.Offline.slice(0,4)
										})
									})
								}else{
									let a={
										id:item.id,
										state:'0'
									}
									this.$api.upOffline(a).then(res=>{
										this.$api.getOffline().then(res=>{
											this.Offline=res.data
											this.Offline1=this.Offline
										})
									})
								}
								
								
								},
								del(item){
									uni.navigateTo({
										url:`/pages/searchdel/details?id=${item.id}`
									})
								}
	                 }
    }
</script>

<style lang="scss">
	.course-box{
		width: 100%;
		height: 100vh;	
		.course-box-top{
			width: 100%;
			height: 480upx;
		}
		.course-tab{
			width: 100%;
			height: 79upx;
			box-shadow: 1px 1px 4px #d7d7d7;
			}
			.course-box-content{
				width: 100%;
				height: 1000upx;
			}
					// tab=0
					 .yunqi{
				  width: 100%;
				  height: 500upx;
					
			  }
			  
			  // 线下
			  .Offline{
				  width: 100%;
                  
			  }
	}
</style>